'use strict';

var React = require('react');
var Router = require('react-router'); 

var CenterBank = React.createClass({
  getInitialState : function(){
    return {
      isEdit : false,
      infos : {
        account : '张倩倩',
        idNumber : 435341354354135435435,
        bank: 12323465452,
        location : '北京',
        bankCard : 41354354354365454
      }
    };
  },
  handleSave : function(){

    this.setState({ isEdit : false });
  },
  handleEditSate : function(){
    this.setState({ isEdit : true });
  },
  handleAccountChange : function(){
    var account  = this.ref.account.getDOMNode().value.trim();
    this.setState({ infos : { account : account }});
  },
  render: function() {
    var accountBox;
    var idNumberBox;
    var bankBox;
    var locationBox;
    var backCardBox;
    var editButton;
    if(this.state.isEdit){
      accountBox =  <input type="text" className="do-input" id="form-account" defaultValue={this.state.infos.account} onChange={ this.handleAccountChange } ref="account"/>;
      idNumberBox =  <input type="text" className="do-input" id="form-idnumber" defaultValue={this.state.infos.idNumber} />;
      bankBox =  <input type="text" className="do-input" id="form-back" defaultValue={this.state.infos.bank} />;
      locationBox =  <input type="text" className="do-input" id="form-location" defaultValue={this.state.infos.location} />;
      backCardBox =  <input type="text" className="do-input" id="form-bankcard" defaultValue={this.state.infos.bankCard} />;
      editButton = <a href="javascript:;" className="do-btn do-btn-success do-btn-md" onClick={ this.handleSave }>保存</a>;
    }else{
      accountBox = this.state.infos.account;
      idNumberBox = this.state.infos.idNumber;
      bankBox = this.state.infos.bank;
      locationBox = this.state.infos.location;
      backCardBox = this.state.infos.bankCard;
      editButton = <a href="javascript:;" className="do-btn do-btn-success do-btn-md" onClick={ this.handleEditSate }>编辑</a>;
    }

    return (
    /* jshint ignore:start */
        <div className="do-p-lg">
            <div className="do-form-group">
            <label className="do-control-label" htmlFor="form-name">开户人 :</label>
            <div className="do-form-input">
              { accountBox }
            </div>
        </div>
        <div className="do-form-group">
            <label className="do-control-label" htmlFor="form-idnumber">身份证号码 :</label>
            <div className="do-form-input">
              { idNumberBox }
            </div>
        </div>
        <div className="do-form-group">
            <label className="do-control-label" htmlFor="form-bank">开户银行 :</label>
            <div className="do-form-input">
              { bankBox }
            </div>
        </div>
        <div className="do-form-group">
            <label className="do-control-label" htmlFor="form-location">所在地 :</label>
            <div className="do-form-input">
              { locationBox }
            </div>
        </div>
        <div className="do-form-group">
            <label className="do-control-label" htmlFor="form-backcard">银行卡号 :</label>
            <div className="do-form-input">
              { backCardBox }
            </div>
        </div>
        <div className="do-form-group">
          { editButton }
        </div>
        </div>
    /* jshint ignore:end */
    );
  }
});



module.exports =CenterBank;